<template>
  <div class="test-d3-graph">
    <div class="header">
      <h1>D3.js 图谱测试</h1>
      <div class="controls">
        <a-button @click="loadSampleData" type="primary">加载示例数据</a-button>
        <a-button @click="clearData">清空数据</a-button>
      </div>
    </div>
    <div class="graph-container">
      <SimpleD3Graph 
        v-if="graphData.nodes.length > 0" 
        :data="graphData" 
        @node-click="handleNodeClick"
      />
      <div v-else class="no-data">
        <a-empty description="点击"加载示例数据"按钮来查看图谱" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { message } from 'ant-design-vue'
import SimpleD3Graph from '@/components/3d-network/SimpleD3Graph.vue'

const graphData = ref({
  nodes: [],
  links: []
})

const loadSampleData = () => {
  graphData.value = {
    nodes: [
      { id: '1', name: '张三', type: 'person', size: 15 },
      { id: '2', name: '李四', type: 'person', size: 12 },
      { id: '3', name: '王五', type: 'person', size: 10 },
      { id: '4', name: '公司A', type: 'organization', size: 20 },
      { id: '5', name: '公司B', type: 'organization', size: 18 },
      { id: '6', name: '北京', type: 'location', size: 25 },
      { id: '7', name: '上海', type: 'location', size: 22 }
    ],
    links: [
      { source: '1', target: '4', type: '工作于', weight: 2 },
      { source: '2', target: '5', type: '工作于', weight: 1 },
      { source: '3', target: '4', type: '工作于', weight: 1 },
      { source: '1', target: '2', type: '朋友', weight: 1 },
      { source: '2', target: '3', type: '朋友', weight: 1 },
      { source: '4', target: '6', type: '位于', weight: 3 },
      { source: '5', target: '7', type: '位于', weight: 2 },
      { source: '1', target: '6', type: '居住于', weight: 1 },
      { source: '2', target: '7', type: '居住于', weight: 1 }
    ]
  }
  message.success('示例数据加载成功')
}

const clearData = () => {
  graphData.value = { nodes: [], links: [] }
  message.info('数据已清空')
}

const handleNodeClick = (node) => {
  message.info(`点击了节点: ${node.name} (类型: ${node.type})`)
  console.log('点击的节点:', node)
}
</script>

<style scoped>
.test-d3-graph {
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 20px;
  background-color: #f5f5f5;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header h1 {
  margin: 0;
  color: #1890ff;
}

.controls {
  display: flex;
  gap: 10px;
}

.graph-container {
  flex: 1;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.no-data {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>








